<template>
	<scroll-view class="content" scroll-y="true" :scroll-top="screenTop" @scroll="scrollChange">
		<!-- <image class="logo" src="../../static/car_banner.webp" mode="widthFix"></image> -->
		<view id="top-banner">
			<!-- <image class="logo" :src="'https://dycrm.fanshucar.cn/prod-api'+item" mode="widthFix"
				v-for="(item, index) in topImage" :key="index"></image> -->
			<image class="logo" :src="'https://dycrm.fanshucar.cn/prod-api' + topImage[0]" mode="widthFix"></image>
			<!-- <view class="banne-top">
				<image src="../../static/banner_top.png" mode=""></image>
				<view class="banne-text">
					免费发布信息，上百家物流给您报价
				</view>
			</view> -->
		</view>

		<view class="car_header">

			<!-- <view class="row-title">
					在线查价
				</view> -->

			<view class="row-between2">
				<view class="between-start" @click="changeRegionString">
					<view class="placeholder placeholder-style" v-if="cityObject.cityString == ''">始发地</view>
					<view class="origin text" v-else>{{ cityObject.cityString }}</view>
					<image src="@/static/images/index/polygon.png" mode=""></image>
				</view>
				<view class="between-end" @click="changeAimRegionString">
					<view class="placeholder placeholder-style" v-if="cityObject.aimCityString == ''">目的地</view>
					<view class="origin text" v-else>{{ cityObject.aimCityString }}</view>
					<image src="@/static/images/index/polygon.png" mode=""></image>
				</view>
			</view>

			<view class="select-cartype">选择车型</view>

			<view class="cartype" style="justify-content: space-around;">
				<view :class="[currentIndex == index ? 'tag_active' : '', 'tag']" v-for="(item, index) in tagList"
					:key="index" @click="checked(index)">
					{{ item }}
				</view>

			</view>

			<!-- <view class="text-area row-start">
					<image class="icon" src="../../static/car_icon.png" mode="aspectFit"></image>
					<view class="title">{{title}}</view>
				</view>
				
				
				<view class="tagList row-between">
					<view @click="changeRegionString" style="width: 40%;">
						<view class="placeholder" v-if="cityObject.cityString == ''">始发地</view>
						<view class="origin" v-else>{{cityObject.cityString}}</view>
					</view>
					<image src="../../static/wangfan.png" mode="widthFix" style="width: 50upx;height: 50upx;"></image>
					<view @click="changeAimRegionString" style="width: 40%;">>
						<view class="placeholder" v-if="cityObject.aimCityString == ''">目的地</view>
						<view class="origin" v-else>{{cityObject.aimCityString}}</view>
					</view>
				</view>
				<view class="tagList row-between" style="justify-content: space-around;">
					<view :class="[currentIndex == index? 'tag_active' : 'tag']" v-for="(item, index) in tagList"
						:key="index" @click="checked(index)">
						{{ item }}
					</view>
				</view> -->

			<!-- <input class="phoneNumber" type="number" placeholder="请输入电话号码" v-model="kzphoneNumber" /> -->
			<view class="check" @tap="getPhoneNumberHandler" data-eventsync="true" v-if="userInfo.iv !== ''">免费获取报价
			</view>
			<button class="check" open-type="getPhoneNumber" @getphonenumber="getPhoneNumberHandler"
				v-else>免费获取报价</button>
			<!-- <button  class="check" @click="getPhoneNumberHandler" open-type="getPhoneNumber">免费获取报价</button> -->
			<!-- <button class="check" open-type="getPhoneNumber" c="getPhoneNumberHandler" >
				授权手机号
				</button> -->
			<!-- <button class="check" open-type="getPhoneNumber" @getphonenumber="checkCars">立即托运</button> -->
			<!-- <view class="tip">首次托运送价值30w全险</view> -->
			<view class="row-center">
				<view>已有</view>
				<!-- <view :class="item.miniStyle" v-for="(item, index) in txtStyle" :key="index">{{ item.digit }}</view> -->
				<view class="popel-num">{{ popelNum }}</view>
				<view>人获取托运方案</view>
			</view>
			<view class="slogan-lis">
				<view class="slogan-item">
					<image src="@/static/images/index/slogan1.png" mode=""></image>
					<text>发布托运信息</text>
				</view>
				<view class="slogan-item">
					<image src="@/static/images/index/slogan2.png" mode=""></image>
					<text>发布托运信息</text>
				</view>
				<view class="slogan-item">
					<image src="@/static/images/index/slogan3.png" mode=""></image>
					<text>发布托运信息</text>
				</view>
			</view>
			<liu-choose-address ref="scroll" @change='chooseSuccess' :key="isAddress"></liu-choose-address>
		</view>

		<view class="acceptCar-null" v-if="isNull">
			<view>-- 暂未查询到该路线信息 --</view>
			<view>敬请期待</view>
		</view>

		<!-- 承运公司 -->
		<view class="acceptCarriage">
			<view class="acceptCarriage-item" v-for="(item, index) in acceptCarList" :key="item.id">
				<view>
					<view class="acceptCar-name">
						<text>承运公司:</text>
						<text>{{ item.affiliatedOrganization == null ? '运车网' : item.affiliatedOrganization }}</text>
					</view>
					<view class="logistics-route">
						<view class="logisticsRoute-cover">
							<view>{{ item.originatingProvince }}</view>
							<view>{{ item.originatingCity }}</view>
						</view>
						<view class="logisticsRoute-center">
							<view class="adress-flag">发</view>
							<view>
								<view class="info">
									<text>预计行驶里程：</text>
									<text>{{ item.mileage }}KM</text>
								</view>
								<view class="line"></view>
								<view class="info">
									<text>预计运输时长：</text>
									<text>{{ item.transitTime * 24 }}h</text>
								</view>
							</view>
							<view class="adress-flag">收</view>
						</view>
						<view class="logisticsRoute-cover">
							<view>{{ item.destinationProvince }}</view>
							<view>{{ item.destinationCity }}</view>
						</view>
					</view>
					<view class="price-btn">
						<view class="price-btn-left">
							<text v-if="item.lineType != null && item.lineType != ''">{{ item.lineType }}价:</text>
							<text v-else>预估价:</text>
							<text style="color: #D52622">¥</text>
							<text style="font-size: 36rpx;color: #D52622;font-weight: 500;">{{ item.price }}</text>
						</view>
						<view class="price-btn-right">
							<button class="btn iphone-btn" @click="callPhone(item.contactNumber)">
								<image src="@/static/images/index/iphone.png" mode=""></image>
							</button>
						</view>
						<!-- <view class="btn">线上下单</view> -->
					</view>
				</view>
			</view>
		</view>



		<view class="pics">
			<image class="pic" :src="baseUrl + '/profile/code_img/img.webp'" mode="widthFix"></image>
		</view>

		<!-- 文章 -->
		<view class="new-model row-between">
			<view class="title row-between">
				精选推荐
			</view>
			<view class="more row-column-center" @click="navigator('/subPages/index/article')">
				<!-- <text>更多</text> -->
				<!-- <image src="@/static/images/mine/enter.png" mode=""></image> -->
				<uni-icons type="right" size="34rpx"></uni-icons>
			</view>
		</view>
		<!-- 文章列表 -->
		<view class="new-list">
			<view class="new-item row-between" v-for="(item, index) in articleList" :key="index"
				@click="toNewDetail(item)">
				<image :src="baseUrl + item.contentPicture" mode="" class="new-image"></image>
				<view class="new-info">
					<view class="new-title ellipsis-text-more">
						{{ item.title }}
					</view>
					<view class="new-mesage ellipsis-text">
						<!-- {{item.contentText}} -->
					</view>
					<view class="new-mesage">
						{{ item.createTime | forrmatterTime }}
					</view>
				</view>
			</view>
		</view>


		<view class="filings">备案号：鄂ICP备2021020032号-3X</view>
		<!-- <view class="filings">客服联系电话：400-89763421</view> -->
	</scroll-view>
</template>

<script>
import Common from '@/api/common.js'
import {
	baseUrl
} from '@/config'
let timer;
export default {
	data() {
		return {
			baseUrl,
			title: '您的爱车类型',
			kzphoneNumber: '',
			anchorId: '1',
			currentIndex: 0,
			person: 0,
			cityObject: {
				province: '',
				provinceString: '',
				city: '',
				cityString: '',
				region: '',
				regionString: '',
				aimProvince: '',
				aimProvinceString: '',
				aimCity: '',
				aimCityString: '',
				aimRegion: '',
				aimRegionString: ''
			},
			type: 1,
			tagList: ['轿车', 'SUV', 'MPV'],
			pics: [
				baseUrl + '/code_img/profile/img.webp'
			],
			topImage: [],


			acceptCarList: [],
			screenTop: '',
			isAddress: true,
			userInfo: {
				encryptedData: '',
				iv: ''
			},
			isNull: false,
			articleList: []
		}
	},
	computed: {
		txtStyle() {
			const dightStyle = this.person.toString().split('')
			return dightStyle.map((digit) => ({
				digit,
				miniStyle: 'txt2'
			}))
		},
		popelNum() {
			return this.person.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
		}
	},
	async onLoad(options) {
		//获取主播信息
		if (options.anchorId) this.anchorId = options.anchorId
		await this.getNum()
		// await this.getMap()
		timer = setInterval(() => {
			(async () => {
				await this.getNum()
			})()
		}, 1000 * 60 * 2)
		// #ifdef MP-TOUTIAO  
		tt.login({
			success: function (res) {
				if (res.code) { } else {
					console.log('登录失败！' + res.errMsg);
				}
			},
			fail: function (err) {
				console.error('登录调用失败：', err);
			}
		});
		this.getTopImg()
		// #endif
		this.getArticleList();
	},
	beforeDestroy() {
		clearInterval(timer)
	},
	mounted() {
		this.$nextTick(() => {
			this.screenTop = 0;
			console.log(this.screenTop)
		})
	},
	filters: {
		forrmatterTime(time) {
			if (!time || time == '') return "";
			return time.split(" ")[0]
		}
	},
	methods: {
		navigator(url) {
			uni.navigateTo({
				url
			})
		},
		// 获取顶部图片路径
		async getTopImg() {
			try {
				const res = await this.$GET(
					'https://dycrm.fanshucar.cn/prod-api/crm/banner/list?pageNum=1&pageSize=10')
				res.rows.forEach(item => {
					this.topImage.push(item.img)
				})
			} catch (e) { }
		},
		// 给商家打电话
		callPhone(contactNumber = '13451322482') {
			if (contactNumber) {
				tt.showModal({
					content: `是否要给 ${contactNumber} 拨打电话`,
					confirmText: "确定",
					cancelText: "关闭",
					success(res) {
						tt.makePhoneCall({
							phoneNumber: contactNumber,
							success: function (res) {
								console.log('拨打电话成功', res);
								// 可以在这里处理拨打电话成功后的逻辑  
							},
							fail: function (err) {
								console.log('拨打电话失败', err);
								// 可以在这里处理拨打电话失败后的逻辑  
							}
						});
					},
					fail(err) { },
					complete(res) { }
				});
			} else {
				tt.showModal({
					content: "该运营商未完善联系方式，请联系客服！",
					confirmText: "确定",
					showCancel: false,
					success(res) { },
					fail(err) { },
					complete(res) { }
				});
			}
		},
		scrollChange(e) {
			console.log(e)
			this.$nextTick(() => {
				this.screenTop = e.detail.screenTop;
			})

		},
		getPhoneNumberHandler(e) {
			console.log(e);
			if (this.userInfo.iv !== '') {
				this.checkCars()
			} else if (e.detail.errMsg === 'getPhoneNumber:ok') {
				this.userInfo.encryptedData = e.detail.encryptedData
				this.userInfo.iv = e.detail.iv
				this.checkCars(e)
			} else if (e.detail.errMsg === 'no phone number') {
				uni.showToast({
					icon: 'none',
					title: '获取失败，请先去绑定手机号！'
				})
			}
		},
		handler(e) {
			// 获取用户信息
			tt.getUserProfile({
				force: true,
				success: userRes => {
					// 此时的 userRes.userInfo 是不需要解码的，可以直接使用
					const userInfo = userRes.userInfo;
					this.checkCars(e)
				},
				fail: err => {
					uni.showToast({
						title: '信息获取失败！',
						icon: 'fail'
					})
					// uni.showLoading({title: '信息获取失败！'})
					console.error('获取用户信息失败:', err);
				}
			});
		},
		changeRegionString() {
			this.isAddress = !this.isAddress
			console.log('改变起始地')
			this.type = 1
			this.$refs.scroll.open()
		},
		changeAimRegionString() {
			this.isAddress = !this.isAddress
			console.log('改变目的地')
			this.type = 2
			this.$refs.scroll.open()
		},
		//地址选择成功
		chooseSuccess(e) {
			console.log('省市区选择', e)
			if (this.type == 1) {
				this.cityObject.province = e.value[0].value,
					this.cityObject.provinceString = e.value[0].label,
					this.cityObject.city = e.value[1].value,
					this.cityObject.cityString = e.value[1].label,
					// this.cityObject.region = e.value[2].value,
					// this.cityObject.regionString = e.value[2].label
					console.log('始发地', this.cityObject.regionString)
			} else {
				this.cityObject.aimProvince = e.value[0].value,
					this.cityObject.aimProvinceString = e.value[0].label,
					this.cityObject.aimCity = e.value[1].value,
					this.cityObject.aimCityString = e.value[1].label,
					// this.cityObject.aimRegion = e.value[2].value,
					// this.cityObject.aimRegionString = e.value[2].label
					console.log('目的地', this.cityObject.aimRegionString)
			}
		},
		clearCity() {
			this.cityObject = {
				province: '',
				provinceString: '',
				city: '',
				cityString: '',
				region: '',
				regionString: '',
				aimProvince: '',
				aimProvinceString: '',
				aimCity: '',
				aimCityString: '',
				aimRegion: '',
				aimRegionString: ''
			}
		},
		async getMap() {
			const res = await this.$GET('http://121.41.46.17:8083/crm/china/list?pageNum=1&pageSize=10000')
			console.log(res)
		},
		async checkCars(e) {
			// tt.getUserProfile({
			//   desc: '用于完善会员资料', // 声明获取用户个人信息后的用途  
			//   success: function(res) {  
			//     console.log(res.userInfo); // 用户信息，包括昵称、头像等  
			//   }  
			// });
			// return
			if (this.cityObject.cityString == '') {
				uni.showToast({
					icon: 'none',
					title: '请填写始发地名称'
				})
				return
			} else if (this.cityObject.aimCityString == '') {
				uni.showToast({
					icon: 'none',
					title: '请填写目的地名称'
				})
				return
			}
			// else if (this.kzphoneNumber == '' || !this.$methods.handlePhone(this.kzphoneNumber)) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '手机号格式不正确'
			// 	})
			// 	return
			// } 
			else {
				const res = await uni.login();

				let params = res;
				if (Array.isArray(res)) {
					params = res[1];
				}
				const data = {
					encryptedData: this.userInfo.encryptedData,
					iv: this.userInfo.iv,
					// kzNickname: user.userInfo.nickName,
					vehicleTypeOne: this.tagList[this.currentIndex],
					dyCode: params.code,
					anchorId: this.anchorId,
					kzphoneNumber: this.kzphoneNumber || '',
					kzplatform: '抖音平台',
					...this.cityObject
				}
				const res2 = await this.$POST('/crm/clue', data)
				console.log('res2: ', res2);
				if (res2.code == 200) {
					// this.clearCity()
					const query = uni.createSelectorQuery().in(this);
					// query.select('#top-banner').boundingClientRect(data => {
					// 	if (data) {
					// 		console.log(data)
					// 		this.$nextTick(() => {
					// 			this.screenTop = data.height;
					// 		})
					// 	}
					// }).exec();
					if (res2.data.directPaths.length > 0) {
						this.acceptCarList = res2.data.directPaths;
						this.isNull = false
						uni.showModal({
							title: '温馨提示',
							content: '您的托运需求已提交，十分钟内会有相关客服人员与您联系！',
							showCancel: false,
							success: res => {
								console.log('确定')
							}
						})
					} else {
						this.isNull = true
					}
					this.kzphoneNumber = ''
				} else {
					uni.showModal({
						title: '提示',
						content: '服务器错误！',
						showCancel: false,
						success: res => {
							console.log('确定')
						}
					})
				}
			}
		},
		async getNum() {
			const res = await this.$GET('/crm/clue/getKzCount')
			if (res.code == 200) {
				this.person = res.data.kzCount

			}
		},
		async checked(index) {
			this.currentIndex = index
		},
		// 获取文章列表
		async getArticleList() {
			let res = await Common.getArticleList({
				pageSize: 5,
				pageNum: 1
			});
			this.articleList = res.rows;
		},
		toNewDetail(item) {
			uni.navigateTo({
				url: '/subPages/index/articleDetail?id=' + item.id
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.new-model {
	margin-bottom: 40rpx;
	padding: 0 28rpx;

	.title {
		font-weight: 500;
		font-size: 34rpx;

		&::before {
			display: inline-block;
			content: "";
			width: 4rpx;
			height: 30rpx;
			background-color: #1777FF;
			vertical-align: middle;
			margin-right: 8rpx;
			border-radius: 4rpx;
		}
	}

	.more {
		font-size: 26rpx;
		color: #666;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-left: 12rpx;
			vertical-align: middle;
		}
	}
}

.new-list {
	padding: 0 28rpx;
	width: 100vw;
	box-sizing: border-box;
	font-family: "PingFang SC";
	margin-bottom: 60rpx;

	.new-item {
		margin-bottom: 20rpx;
		height: 165rpx;

		.new-image {
			flex: 0 0 220rpx;
			width: 220rpx;
			height: 165rpx;
			background: #D9D9D9;
			border-radius: 24rpx;
		}

		.new-info {
			margin-left: 20rpx;
			width: 454rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.new-title {
				font-size: 30rpx;
				color: #1a1a1a;
				font-weight: bold;
				line-height: 1.5;
			}

			.new-mesage {
				font-size: 26rpx;
				color: #666;
				line-height: 1;
				margin-top: 5rpx;
			}
		}
	}
}

.content {
	// display: flex;
	// flex-direction: column;
	// align-items: center;
	// justify-content: center;
	background-color: #efefef;
	overflow-y: auto;
	width: 100%;
	height: 100vh;

	.car_header {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0 28rpx;
		box-sizing: border-box;
		border-radius: 30upx;
		// padding: 30upx 0;
		background-color: #fff;
		// box-shadow: 2px 2px 78px -18px rgba(66, 68, 90, 0.37);
		border-radius: 24px;
		overflow: hidden;
		z-index: 999 !important;
		position: relative;
	}
}

.banne-top {
	width: 94vw;
	padding-top: 8rpx;
	padding-bottom: 30upx;
	margin: 0 28rpx;

	image {
		height: 60rpx;
	}

	.banne-text {
		color: #000000;
		font-family: "PingFang SC";
		font-size: 26upx;
		font-style: normal;
		font-weight: 300;
		line-height: 26upx;
		letter-spacing: 2upx;
		opacity: 0.5;
		// margin-top: 30upx;
	}
}

.logo {
	/* height: 200rpx; */
	width: 100%;
	/* margin-top: 200rpx; */
	margin-left: auto;
	margin-right: auto;
	// margin-bottom: 20upx;
	height: 38vh !important;
}

.row-title {
	background: linear-gradient(118deg, #5FA1FF 44.13%, #06F 86.97%);
	color: #ffffff;
	font-family: "PingFang SC";
	font-size: 30upx;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	width: 100%;
	height: 78upx;
	padding-left: 34upx;
	box-sizing: border-box;
	line-height: 78upx;
}

.row-between2 {
	padding-top: 40rpx;
	display: flex;

	.between-start,
	.between-end {
		color: #000000;
		font-family: "PingFang SC";
		font-size: 26upx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		opacity: 0.5;
		width: 313upx;
		height: 64upx;
		border-radius: 8px;
		background: #f6f6f6;
		line-height: 64upx;
		padding: 0 20upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;

		image {
			width: 24upx;
			height: 14upx;
		}
	}

	.between-end {
		margin-left: 20upx;
	}
}

.text {
	color: #000000;
	font-weight: 700;
}

.placeholder-style {
	opacity: 0.5;
}

.select-cartype {
	color: #000000;
	font-family: "PingFang SC";
	font-size: 30upx;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	opacity: 0.9;
	width: 100%;
	padding: 40upx 0 20upx 24upx;
	box-sizing: border-box;
}

.cartype {
	display: flex;
	text-align: center;
	font-family: "PingFang SC";
	font-size: 30upx;
	font-style: normal;
	color: #000000;
	font-weight: 400;

	.tag {
		width: 202upx;
		height: 80upx;
		background: #F0F6FF;
		border-radius: 10px;
		color: #000000;
		opacity: 0.5;
		margin-left: 20upx;
		line-height: 80upx;

		&:first-of-type {
			margin-left: 0;
		}
	}

	.tag_active {
		border-radius: 10px;
		border: 2upx solid #1777FF;
		opacity: 0.9;
	}
}

.text-area {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-bottom: 50upx;

	.icon {
		width: 50upx;
		height: 50upx;
		margin-right: 10upx;
		margin: 0 10upx 0 30upx;
	}
}

.phoneNumber {
	width: 80%;
	height: 60upx;
	line-height: 60upx;
	margin: 0 0 30upx 0;
	padding: 10upx 0;
	border: 1upx solid #333333;
	border-radius: 10upx;
	text-align: center;
}

.tagList {
	width: 80%;
	margin-bottom: 50upx;

	.placeholder {
		width: 100%;
		height: 60upx;
		line-height: 60upx;
		padding: 10upx 0;
		border: 1upx solid #333333;
		border-radius: 10upx;
		text-align: center;
		color: #a0a0a0;
		font-size: 28upx;
	}

	.origin {
		width: 100%;
		height: 60upx;
		line-height: 60upx;
		padding: 10upx 0;
		border: 1upx solid #333333;
		border-radius: 10upx;
		text-align: center;
		font-size: 32upx;
		font-weight: bold;
	}

	.destination {
		width: 100%;
		height: 60upx;
		line-height: 60upx;
		padding: 10upx 0;
		border: 1upx solid #333333;
		border-radius: 10upx;
		text-align: center;
		font-size: 32upx;
	}

	.tag {
		padding: 15upx 35upx;
		border-radius: 14upx;
		color: #868686;
		font-size: 30upx;
		border: 1upx solid #efefef;
		background-color: #efefef;
	}

	.tag_active {
		padding: 15upx 35upx;
		border-radius: 14upx;
		color: #3388e8;
		font-size: 30upx;
		font-weight: 700;
		background-color: #ffffff;
		border: 1upx solid #3388e8;
	}
}

.check {
	// padding: 10upx 60upx;
	width: 646upx;
	height: 88upx;
	line-height: 88upx;
	border-radius: 12upx;
	text-align: center;
	background-color: #1777FF;
	margin: 40upx 0 25upx 0;
	color: #ffffff;
	text-align: center;
	font-family: "PingFang SC";
	font-size: 30upx;
	font-style: normal;
	font-weight: 400;
	box-shadow: 0upx 0upx 20upx 10upx #1777ff;
	transform: scale(0.9);
	animation: checkbox 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse
}

@keyframes checkbox {
	form {
		transform: scale(0.8);
	}

	to {
		transform: scale(1)
	}
}

.row-center {
	color: #666;
	font-family: "PingFang SC";
	font-size: 26upx;
	font-style: normal;
	font-weight: 400;
	line-height: 26upx;
	letter-spacing: 2upx;
	margin-bottom: 25upx;

	.popel-num {
		font-family: "Poppins";
		font-size: 36upx;
		font-weight: 700;
		line-height: 36upx;
		letter-spacing: 2upx;
		color: #222;
		margin: 0 12upx;
	}
}

.slogan-lis {
	display: flex;
	align-items: center;
	padding-bottom: 40upx;

	.slogan-item {
		color: #1777ff;
		font-family: "PingFang SC";
		font-size: 26upx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		opacity: 0.8;
		margin-left: 40upx;
		display: flex;
		align-items: center;

		&:first-of-type {
			margin-left: 0;
		}

		image {
			width: 26upx;
			height: 26upx;
			margin-right: 8upx;
		}
	}
}

.tip {
	font-size: 28upx;
	color: #afafaf;
	margin: 10upx 0 30upx 0;
}

// .txt1 {
// 	font-size: 32upx;
// 	font-weight: 500;
// 	color: #333333;
// 	margin: 0 10upx;
// }

// .txt2 {
// 	font-size: 58upx;
// 	font-weight: 700;
// 	color: #333333;
// 	margin: 0 2upx 20upx 2upx;
// 	border: 1upx solid #3388e8;
// 	border-radius: 10upx;
// }

// .txt3 {
// 	font-size: 40upx;
// 	font-weight: 500;
// 	color: #333333;
// 	margin: 0 20upx;
// }

.lines {
	margin-bottom: 50upx;

	.line {
		width: 100upx;
		height: 1upx;
		background-color: #333333;
	}
}

.pics {
	width: 94vw;
	margin: 60upx 28upx 100upx 28upx;
	margin-bottom: 0;

	.pic {
		width: 100%;
		border-radius: 10upx;
	}
}

// .title {
// 	width: 100%;
// 	font-weight: 600;
// 	font-size: 36upx;
// 	color: #333333;
// }

.filings {
	font-size: 30upx;
	font-weight: 500;
	color: #333333;
	margin-bottom: 100upx;
	text-align: center;
}

.acceptCar-null {
	display: flex;
	flex-direction: column;
	align-items: center;
	// justify-content: center;
	margin: 0 28rpx;
	// box-sizing: border-box;
	border-radius: 24px;
	background-color: #e3e3e3;
	color: #939393;
	font-size: 32rpx;
	padding: 60rpx 0 30rpx 0;
	margin-top: -30rpx;
}

.acceptCarriage {
	margin: 20rpx 0;
	width: 100vw;
	padding: 0 28rpx;
	box-sizing: border-box;
	font-family: "PingFang SC";
	font-style: normal;

	.acceptCarriage-item {
		margin-top: 20rpx;
		background: #fff;
		border-radius: 50rpx;
		padding: 28rpx;
	}

	.acceptCar-name {
		color: #1a1a1a;
		font-size: 30rpx;
		margin-bottom: 20rpx;
		font-weight: 500;
	}

	.logistics-route {
		background-color: #f6f6f6;
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-radius: 20rpx;

		.logisticsRoute-cover {
			// display: flex;
			// align-items: center;
			color: #1a1a1a;
			font-size: 30rpx;
			font-weight: 500;
		}

		.adress-flag {
			width: 40rpx;
			height: 40rpx;
			background-color: #01378D;
			color: #fff;
			font-size: 26rpx;
			text-align: center;
			border-radius: 50%;
			line-height: 40rpx;
		}

		.logisticsRoute-center {
			font-size: 24rpx;
			color: #a6a6a6;
			text-align: center;
			display: flex;
			align-items: center;

			.line {
				border-top: 2rpx dashed #E0E0E0;
				margin: 10rpx 0;
			}
		}
	}

	.price-btn {
		padding-top: 20rpx;
		display: flex;
		justify-content: space-between;

		.price-btn-left {
			font-size: 24rpx;
			color: #a6a6a6;
		}

		.price-btn-right {
			font-size: 28rpx;
			color: #fff;
			display: flex;

			.btn {
				padding: 15rpx 25rpx;
				border-radius: 30rpx;
				background-color: #01378D;
				margin-left: 15rpx;
				overflow: hidden;
			}

			.iphone-btn {
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

	}
}
</style>